<template>
    <div class="content" style="font-size: 14px;padding:16px 10px;">
        <div class="flexLR">
            <div>日期：
                <span style="color: #187FF5;" @click="showPicker = true">{{ nowDate }}</span>
            </div>
            <div>
                <!-- <van-button type="primary" class="saveBtn">一键已读</van-button> -->
            </div>
        </div>
        <div style="margin-top: 10px;overflow-y: auto;height: 100%;padding-bottom: 40px;">
            <van-list v-if="showList" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                @load="getRaisedustList">
                <div class="stepsItemContentDiv" v-for="item, index in dataList" :key="index">
                    <div class="flexLR">
                        <div style="font-size: 16px;">{{ item.recordtime }}</div>
                        <div class="redTag" style="height: 16px;border-radius: 2px;padding:0px 4px;">
                            强风预警
                        </div>
                    </div>
                    <div class="flexLR">
                        <div>
                            <p style="color: rgba(249, 0, 0, 0.8);">{{ item.warnmsg }}</p>
                            <div class="flex">
                                <div style="width: 65px;">风向</div>
                                <div>{{ item.winddirect }}</div>
                            </div>
                            <div class="flex">
                                <div style="width: 65px;">风速</div>
                                <div>{{ item.windspeed }}m/s</div>
                            </div>
                            <div class="flex">
                                <div style="width: 65px;">数据类型</div>
                                <div>{{ item.isAuto == true ? '自动' : '手动' }}</div>
                            </div>
                        </div>
                        <!-- <div class="unread">未读</div> -->
                        <!-- <div class="read">已读</div> -->
                    </div>
                </div>
            </van-list>
            <p v-else style="text-align: center;margin: 40px;font-size: 14px;">没有更多了</p>
        </div>

        <van-popup v-model:show="showPicker" position="bottom">
            <van-date-picker title="选择日期" v-model="desiretimeTime" @cancel="() => { showPicker = false }"
                @confirm="flowSubmit" />
        </van-popup>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useAppStore } from "@/store";
import { GetRaisedustList } from "@/api";
import { CreatedFormData } from "@/utils/CreatedFormData";
import dayjs from 'dayjs';
export default defineComponent({
    name: 'environmental',
    setup() {
        const appStore = useAppStore();

        // 获取当前年月日
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const nowDate = ref(`${year}-${month}-${day}`);
        const desiretimeTime = ref([year, month, day]);

        const dataList = ref([]);
        const loading = ref(false);
        const finished = ref(false);
        const pageIndex = ref(1);
        const getRaisedustList = async () => {
            let fm = CreatedFormData({
                xid: appStore.projectInfo.id,
                isauto: '',
                pageIndex: pageIndex.value,
                pageSize: 10,
                recordtime: nowDate.value,
                isWarn: false,
            })
            const res = await GetRaisedustList(fm);
            if (res.data) {
                dataList.value = dataList.value.concat(res.data);
                pageIndex.value++;
                loading.value = false;
                if (dataList.value.length >= res.count) {
                    finished.value = true;
                }
            }
        }

        const showList = ref(false);
        onMounted(async () => {
            let fm = CreatedFormData({
                xid: appStore.projectInfo.id,
                isauto: '',
                pageIndex: 1,
                pageSize: 1,
                isGetAll: false,
            })
            const res = await GetRaisedustList(fm);
            if (res.data) {
                if (res.data.length > 0) {
                    nowDate.value = dayjs(res.data[0].recordtime).format('YYYY-MM-DD');
                    showList.value = true;
                }
            }
        });

        const showPicker = ref(false);
        const flowSubmit = (options) => {
            nowDate.value = options.selectedValues.join('-');
            showPicker.value = false;
            pageIndex.value = 1;
            dataList.value = []
            getRaisedustList()
        }
        return {
            dataList,
            loading,
            finished,
            getRaisedustList,
            showPicker,
            nowDate,
            desiretimeTime,
            flowSubmit,
            showList
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
}

.saveBtn {
    border: none;
    background: transparent;
    padding: 0px;
    color: #187FF5;
}

.stepsItemContentDiv {
    background: linear-gradient(180deg, rgba(1, 5, 21, 0.40) 0%, rgba(1, 5, 21, 0.60) 97.76%);
    color: #ffffff;
    min-height: 260px;
    padding: 26px;
    line-height: 50px;
    font-size: 22px;
    margin-top: 20px;
}

.redTag {
    color: rgba(249, 0, 0, 0.8);
    background: rgba(249, 0, 0, 0.3);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unread {
    border: 2px solid #F9BA1B;
    color: #F9BA1B;
    font-size: 30px;
    width: 130px;
    text-align: center;
    transform: rotate(-15deg);
    margin-right: 40px;
}

.read {
    border: 2px solid #187ff5;
    color: #187ff5;
    font-size: 30px;
    width: 130px;
    text-align: center;
    transform: rotate(-15deg);
    margin-right: 40px;
}
</style>